<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>个人中心</title>
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<link type="text/css" rel="stylesheet" href="assets/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="assets/css/style.css">
<style type="text/css">
#blogs tr{margin:5px 0;height:30px;}
.addBlog{display:inline-block;width:65px;height:30px;background:#999;color:#fff !important;margin-bottom:10px;text-align:center;line-height:30px;}
.handleB{display:inline-block;width:25px;margin-right:3px;height:30px;font-size:12px;background:#999;color:#fff !important;margin-bottom:10px;text-align:center;line-height:30px;
cursor:pointer;}
#userInfo{float:left;margin:15px 0;}
#userInfo a{font-size:16px;display:inline-block;}
#userInfo img{float:left;border-radius:50%;}
</style>
</head>

<body class="Spage_body">
<!-- top-head -->
<div class="top_head">
	个人中心
	<a href="javascript:void(0)" class="top_head_back" onClick="window.location.href='/blog'"><img src="assets/images/back_btn.png"></a>
</div>
<!-- top-head -->
<!-- wrap -->
<!-- login_box -->
<div class="container login_box" style="padding:0">
		<p style="width:100%" id="userInfo">
			<img id="userPic" src="assets/images/userpic.png" width="150" height="150" alt="用户头像">
			<a href="editinfo">修改资料</a>
			<a href="changePic">修改头像</a>
			<a href="changePW">修改密码</a> 
		</p>
		<div id="bloglist">
			<a class="addBlog" href="createblog">添加博客</a>
			<h2>博客列表</h2>
			<div class="selectB">标签分类：
				<select class="tagS">
					<option value="all">全部</option>
				</select>
			</div>
			<table id="blogs" style="width:100%">
				<tr><th width="20%">标签</th><th width="50%">标题</th><th width="15%">日期</th><th width="15%">操作</th></tr>
			</table>
		</div>
</div>

<!-- login_box -->
<!-- wrap -->
<script type="text/javascript" src="assets/scripts/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="assets/scripts/hr-jquery.js"></script>
<script>
	$(document).ready(function(){
		$.get("getUser",function(data){
			$("#userPic").attr("src",data.pic); 
		})
		
		var $page = 1;
		var $pageSize = 5;
		var $total;
		var $paramTag;
		var $getUrl;
		var $sessionTag;

		function getTag(){
			$.get("centerGetTag",function(data){
				$sessionTag = data;
				$(".tagS").val(data);
				getBlogByTag(data);
				getBlogs();
			});
		};
		
		function getBlogs(){
			$.ajax({
				type:"post",
				url:"centerGetBolgs",
				dataType:"json",
				data:{
					"rqpage":$page
				},
				success:function(data){
					console.log(data)
					$("#blogs tr").filter(function(){return $(this).index() > 0}).remove();
					for(var i=0;i<data.length;i++){
						var $pT = (data[i].publishT).split(" ")[0];
						var $a = $pT.split("-");
						$pT = $a[1] + "-" + $a[2];
						var $tr = $("<tr>" 
								+ "<td><span>" + data[i].tag + "</span></td><td><a href='content?blogId=" + data[i].id +  "'>" + data[i].title + "</a></td>"
								+ "<td><em>" + $pT +"</em></td>"
								+ "<td><a class='handleB' href='editblog?blogId=" + data[i].id + "'>编辑</a>"
								+ "<a class='handleB' id='delBlog' data-id='" + data[i].id + "'>删除</button></td>"
								+ "</tr>");
						$("#blogs").append($tr);
					}
				}
			})
		}
		
		$("#blogs").on("click","#delBlog",function(){
			var $blogId = $(this).attr("data-id");
			var $del = confirm("确认删除这条？");
			var $this = $(this);
			var $tableTrLength = $("#blogs").find("tr").length;
			if($del){
				$.ajax({
					type:"get",
					url:"delBlog?blogId=" + $blogId,
					dataType:"json",
					success:function(data){
						if(data.res == 1){
							alert("删除成功！");
							$this.parents("tr").remove();
							
							//当该页删除最后一条后，删掉当前的页码，重新获取页码，page-1重新获取blog
							if($tableTrLength == 2){
								$("#pageBox").remove();
								if($sessionTag == "all"){
									$getUrl = "getallblogtotal";
								}else{
									$sessionTag = "getTagTotalByUserNameAndTag";
								}
								$.get($getUrl,function(data){
									$total = data;
									$pageTotal = Math.ceil($total / $pageSize);
									$pageBox = $("<shiro:user><div id='pageBox'></div></shiro:user>");
									$firstPage = $("<a href='javascript:void(0);' data-page='1'>首页</a>");
									$lastPage = $("<a href='javascript:void(0);' data-page='" + $pageTotal + "'>尾页</a>");
									$prevPage = $("<a href='javascript:void(0);' id='prev'>上一页</a>");
									$nextPage = $("<a href='javascript:void(0);' id='next'>下一页</a>");
									$pageNumber = $("<p class='pageNumber'></p>")
									$pageBox.append($firstPage);
									$pageBox.append($prevPage);
									$pageBox.append($pageNumber);
									$pageBox.append($nextPage);
									$pageBox.append($lastPage);
									$(".container").append($pageBox);
									if($pageTotal <= 5){
										$pageNumber.append(lessPageN($pageTotal)); 
									}else{
										$pageNumber.append(defaultPageN()); 
									}
								})
								
								$page--;
								getBlogs();
								$("#pageBox a").removeClass("acitve").filter(function(){return $(this).html() == $page}).addClass("acitve");
							}
						}
					}
				})
			}
		});
		$.get("getTags",function(data){
			$(".tagS").find("option").filter(function(){return $(this).index() > 0}).remove();
			for(var i=0;i<data.length;i++){
				var $option = $("<option value='" + data[i].tagName + "'>" + data[i].tagName + "</option>");
				$(".tagS").append($option);
			}
			getTag();
		});
		$(".tagS").change(function(){
			var $thisVal = $(this).val();
			$.get("centerSetTag?tagName=" + $thisVal,function(){});
			window.location.reload(); 
		});
		
		//分页====================================
		function getBlogByTag(tag){
			var $tag = tag;
			
			if($tag == "all"){
				$getUrl = "getallblogtotal";
			}else{
				$getUrl = "getTagTotalByUserNameAndTag";
			}
			
			$.get($getUrl,function(data){
				$total = data;
				$pageTotal = Math.ceil($total / $pageSize);
				$pageBox = $("<shiro:user><div id='pageBox'></div></shiro:user>");
				$firstPage = $("<a href='javascript:void(0);' data-page='1'>首页</a>");
				$lastPage = $("<a href='javascript:void(0);' data-page='" + $pageTotal + "'>尾页</a>");
				$prevPage = $("<a href='javascript:void(0);' id='prev'>上一页</a>");
				$nextPage = $("<a href='javascript:void(0);' id='next'>下一页</a>");
				$pageNumber = $("<p class='pageNumber'></p>")
				$pageBox.append($firstPage);
				$pageBox.append($prevPage);
				$pageBox.append($pageNumber);
				$pageBox.append($nextPage);
				$pageBox.append($lastPage);
				$(".container").append($pageBox);
				if($pageTotal <= 5){
					$pageNumber.append(lessPageN($pageTotal)); 
				}else{
					$pageNumber.append(defaultPageN()); 
				}
			})
			$(".container").on("click","#pageBox a",function(){
				var $thisPage = $(this).attr("data-page");
				var $thisHtml = $(this).html();
				
				if(!$thisPage){
					if($thisHtml == "上一页" && $page > 1){
						$page--;
						getBlogs($paramTag);
					}else if($thisHtml == "下一页" && $page < $pageTotal){
						$page++;
						getBlogs($paramTag);
					}else{
						
					}
				}else{
					$page = $thisPage;
					getBlogs($paramTag);
				}
				//小于等于展示页数时
				if($pageTotal <= 5){
					$(".pageNumber span").remove();
					$pageNumber.append(lessPageN($pageTotal));
				}else{//大于展示页数时
					//刚好6页时
					if($pageTotal == 6){
						//page<4时
						if($page < 4){
							$(".pageNumber a").remove();
							$pageNumber.append(defaultPageN()); 
						}else{
							$(".pageNumber a").remove();
							$pageNumber.append(sixPageN()); 
						}
					}
					//大于6页时
					if($pageTotal > 6){
						//page<4时
						if($page < 4){
							$(".pageNumber a").remove();
							$pageNumber.append(defaultPageN()); 
						}else if($page >= 4 && $page <= $pageTotal - 2){
							$(".pageNumber a").remove();
							$pageNumber.append(middlePageN($page)); 
						}else{
							$(".pageNumber a").remove();
							$pageNumber.append(lastPageN()); 
						}
					}
				}
				//点击样式
				pageStyle();
			});
		}
		//小于等于5页
		function lessPageN(pageTotal){
			var $span = $("<span></span>");
			var $as;
			for(var i=1;i<=pageTotal;i++){
				if(i == 1){
					$as = $("<a href='javascript:void(0);' class='active' data-page='" + i + "'>" + i + "</a>");
				}else{
					$as = $("<a href='javascript:void(0);' data-page='" + i + "'>" + i + "</a>");
				}
				$span.append($as);
			}
			return $span;
		}
		//大于5页
		//等于6页尾几页
		function sixPageN(){
			var $as = $("<a href='javascript:void(0);' class='active' data-page='2'>2</a>"
					+ "<a href='javascript:void(0);' data-page='3'>3</a>"
					+ "<a href='javascript:void(0);' data-page='4'>4</a>"
					+ "<a href='javascript:void(0);' data-page='5'>5</a>"
					+ "<a href='javascript:void(0);' data-page='6'>6</a>"
			);
			return $as;
		}
		//初始页码
		function defaultPageN(){
			var $as = $("<a href='javascript:void(0);' class='active' data-page='1'>1</a>"
					+ "<a href='javascript:void(0);' data-page='2'>2</a>"
					+ "<a href='javascript:void(0);' data-page='3'>3</a>"
					+ "<a href='javascript:void(0);' data-page='4'>4</a>"
					+ "<a href='javascript:void(0);' data-page='5'>5</a>"
			);
			return $as;
		}
		//中间的页码
		function middlePageN(page){
			var $mPage = parseInt(page);
			var $as = $("<a href='javascript:void(0);' data-page='" + ($mPage-2) + "'>" + ($mPage-2) + "</a>"
					+ "<a href='javascript:void(0);' data-page='" + ($mPage-1) + "'>" + ($mPage-1) + "</a>"
					+ "<a href='javascript:void(0);' data-page='" + $mPage + "'>" + $mPage + "</a>"
					+ "<a href='javascript:void(0);' data-page='" + ($mPage+1) + "'>" + ($mPage+1) + "</a>"
					+ "<a href='javascript:void(0);' data-page='" + ($mPage+2) + "'>" + ($mPage+2) + "</a>"
			);
			return $as;
		}
		//最后的页码
		function lastPageN(){
			var $lastPage = parseInt($pageTotal);
			var $as = $("<a href='javascript:void(0);' data-page='" + ($lastPage-4) + "'>" + ($lastPage-4) + "</a>"
					+ "<a href='javascript:void(0);' data-page='" + ($lastPage-3) + "'>" + ($lastPage-3) + "</a>"
					+ "<a href='javascript:void(0);' data-page='" + ($lastPage-2) + "'>" + ($lastPage-2) + "</a>"
					+ "<a href='javascript:void(0);' data-page='" + ($lastPage-1) + "'>" + ($lastPage-1) + "</a>"
					+ "<a href='javascript:void(0);' data-page='" + $lastPage + "'>" + $lastPage + "</a>"
			);
			return $as;
		}
		//点击页码样式
		function pageStyle(){
			$("#pageBox a").removeClass("active");
			$(".pageNumber a").filter(function(){
				if($(this).html() ==$page){
					$(this).addClass("active");
				}
			});
		}
		//分页====================================
	});
</script>
</body>
</html>